<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>图书检索</title>

        <!-- 引入 Tailwind CSS (CDN版本，生产环境建议本地构建) -->
        <script src="https://cdn.tailwindcss.com"></script>
        <!-- 引入 HTMX -->
        <script src="https://unpkg.com/htmx.org@1.9.10"></script>

        <style>
            /* 自定义加载动画 */
            .htmx-indicator {
                display: none;
            }
            .htmx-request .htmx-indicator {
                display: inline;
            }
            .htmx-request.htmx-indicator {
                display: inline;
            }
        </style>
    </head>
    <body
        class="bg-slate-50 min-h-screen flex flex-col font-sans text-slate-800"
    >
        <!-- 第一行：顶部用户栏 -->
        <header class="bg-slate-900 text-white shadow-lg">
            <div
                class="container mx-auto px-6 py-4 flex justify-between items-center"
            >
                <div class="flex items-center space-x-2">
                    <!-- 一个简单的图标 -->
                    <svg
                        class="w-6 h-6 text-blue-400"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
                        ></path>
                    </svg>
                    <span class="text-lg font-semibold tracking-wide"
                        >图书管理系统</span
                    >
                </div>

                <div class="flex items-center gap-4">
                    <span class="text-slate-300 text-sm"
                        >欢迎,
                        <span class="font-bold text-white"
                            >{{ username }}</span
                        ></span
                    >
                    <a
                        href="/logout"
                        class="bg-red-600 hover:bg-red-700 text-white text-xs px-3 py-2 rounded transition duration-300"
                    >
                        退出登录
                    </a>
                </div>
            </div>
        </header>

        <!-- 主体内容容器 -->
        <main class="flex-grow container mx-auto px-6 py-8 flex flex-col gap-6">
            <!-- 第二行：搜索输入框 -->
            <div
                class="bg-white p-6 rounded-xl shadow-sm border border-slate-200"
            >
                <div class="relative max-w-2xl mx-auto">
                    <div
                        class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
                    >
                        <svg
                            class="h-5 w-5 text-slate-400"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                            />
                        </svg>
                    </div>
                    <!-- HTMX 核心部分 -->
                    <input
                        type="text"
                        name="q"
                        value="{{ keyword }}"
                        class="block w-full pl-10 pr-12 py-3 border border-slate-300 rounded-lg leading-5 bg-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 ease-in-out"
                        placeholder="输入书名关键词进行实时检索..."
                        autofocus
                        hx-get="/search"
                        hx-trigger="keyup changed delay:500ms, search"
                        hx-target="#search-results"
                        hx-select="#search-results"
                        hx-push-url="true"
                        hx-indicator="#loading-spinner"
                    />
                    <!-- 加载指示器 -->
                    <div
                        id="loading-spinner"
                        class="htmx-indicator absolute inset-y-0 right-0 pr-3 flex items-center"
                    >
                        <svg
                            class="animate-spin h-5 w-5 text-blue-500"
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                        >
                            <circle
                                class="opacity-25"
                                cx="12"
                                cy="12"
                                r="10"
                                stroke="currentColor"
                                stroke-width="4"
                            ></circle>
                            <path
                                class="opacity-75"
                                fill="currentColor"
                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                            ></path>
                        </svg>
                    </div>
                </div>
            </div>

            <!-- 第三行：图书列表 (这个 ID 用于 HTMX 替换) -->
            <div
                id="search-results"
                class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden"
            >
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-200">
                        <thead class="bg-slate-50">
                            <tr>
                                <th
                                    scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider"
                                >
                                    书名
                                </th>
                                <th
                                    scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider"
                                >
                                    作者
                                </th>
                                <th
                                    scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider"
                                >
                                    副本
                                </th>
                                <th
                                    scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider"
                                >
                                    状态
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-slate-200">
                            {% for book in books %}
                            <tr
                                class="hover:bg-slate-50 transition duration-150"
                            >
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div
                                        class="text-sm font-medium text-slate-900"
                                    >
                                        {{ book.book_name }}
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-slate-500">
                                        {{ book.author }}
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="text-sm text-slate-900">
                                        {{ book.number_of_copies }}
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {% if book.book_state == "已借" %}
                                    <!-- 借出状态：黄色/橙色背景 -->
                                    <span
                                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-amber-100 text-amber-800 border border-amber-200"
                                    >
                                        ⚠️ 已借出
                                    </span>
                                    {% else %}
                                    <!-- 馆藏状态：绿色背景 -->
                                    <span
                                        class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100 text-emerald-800 border border-emerald-200"
                                    >
                                        ✅ 馆藏中
                                    </span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% else %}
                            <tr>
                                <td
                                    colspan="4"
                                    class="px-6 py-10 text-center text-slate-400"
                                >
                                    <div
                                        class="flex flex-col items-center justify-center"
                                    >
                                        <svg
                                            class="w-10 h-10 mb-2 text-slate-300"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                        >
                                            <path
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="2"
                                                d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                                            ></path>
                                        </svg>
                                        <p>没有找到匹配的图书</p>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <!-- 底部统计栏 -->
                <div
                    class="bg-slate-50 px-6 py-3 border-t border-slate-200 text-xs text-slate-500 text-right"
                >
                    共找到 {{ books.len() }} 本图书
                </div>
            </div>
        </main>
    </body>
</html>
